import React from 'react'
import './index.css'

function TodoList() {
  return (
    <div className='todo-box'>
        <div className='todo-container'>
            <h2 className='todo-title'>todos</h2>
            <div className='todo-main'>
            <TodoInput />
            <TodoItem></TodoItem>
            </div>
            <div className='bottom'>
            Left click to toggle completed. <br/>
            Right click to delete todo
            </div>
        </div>
    </div>
  )
}

function TodoInput(){
    return (
        <div className='input-box'>
            <input type="text" placeholder='Enter your todo'/>
        </div>
    )
}

function TodoItem({item={name:'hello world'}}){
    return (
        // complete
        <div className='todo-item complete'>
            {item.name}
        </div>
    )
} 
export default TodoList